<template>
	<div class="ZhuddNewsInfo">
		<div class="ZhuddNewsInfo-title">{{nick}}</div>
		<yd-pullrefresh style="position: relative;padding-bottom: 2rem;box-sizing: border-box;" pull-text="下拉查看历史消息" drop-text="松开加载" loading-text="加载中..." :callback="loadList" ref="pullrefreshDemo">
			<div class="ZhuddNewsInfo-content" v-for="item,key in CartHistorydata" :key="key">

				<!--左-->
				<div class="ZhuddNewsInfo-item ZhuddNewsInfo-conleft" v-if="item.from_user!=mySessionUserinfo.id">
					<div class="zcl-iconbox">
						<img class="zcl-icon" v-if="item.pic==''" src="../assets/img/images/zhudd-userimg_03.png" />
						<img class="zcl-icon" v-else :src="item.pic" />
					</div>
					<div class="zcl-textbox">
						<p class="zcl-gary">{{item.ctime}}</p>
						<div class="zcl-content">{{item.msg}}</div>
					</div>
				</div>
				<!--右-->
				<div class="ZhuddNewsInfo-item ZhuddNewsInfo-conright" v-if="item.from_user==mySessionUserinfo.id">
					<div class="zcl-iconbox">
						<!--<img class="zcl-icon" v-if="item.pic==''" src="../assets/img/images/zhudd-userimg_03.png" />-->
						<img class="zcl-icon" :src="item.pic" />
					</div>
					<div class="zcl-textbox zcl-textboxright">
						<p class="zcl-gary zcl-garyright">{{item.ctime}}</p>
						<div v-if="item.house_info==''" class="zcl-content zcl-content-right">{{item.msg}}</div>
						<div v-else class="zcl-content zcl-content-right zclhouse_infobox" @click="GOdetails(item.house_info.house_id,item.house_info.house_type)">
							<img class="zclhouse_infoimg" :src="item.house_info.img" />
							<div class="zclhouse_infotext">
								<p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{item.house_info.title}}</p>
								<p>{{item.house_info.rent_type}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</yd-pullrefresh>

		<div class="ZhuddNewsInfo-sendbox">
			<textarea class="cart-sendtext" v-model="msgsend" placeholder="输入会话内容"></textarea>
			<div class="cart-icon"></div>
			<div class="card-send" @click="sendfun">
				发送
			</div>
		</div>

	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex';
	import api from '../fetch/api';
	export default {
		name: "ZhuddNewsInfo",
		data() {
			return {
				houseId: this.$route.query.houseId,
				user_id: this.$route.query.user_id,
				houseType: this.$route.query.houseType,
				nick: this.$route.query.nick,
				house_info: this.$route.query.house_info,
				num: this.$route.query.num,
				CartHistorydata: [],
				msgsend: '',
				page: 1,
				websock: null,
				mySessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")), //登录验证
				//				baseInfodata: JSON.parse(sessionStorage.getItem("baseInfodata")), //登录验证
			}
		},

		created() {
			this.GetCartHistoryApi();
			this.initWebSocket();
			this.setBaseInfo();
		},
		computed: {
			...mapGetters([
				'source',
				'baseInfodata'
			])
		},
		mounted() {},
		methods: {
			...mapActions({
				setBaseInfo: 'setBaseInfo'
			}),
			GOdetails(houseId, house_info) {
				if(house_info == 1) {
					that.$router.push({
						path: '/longDetails',
						query: {
							houseId: houseId
						}
					})
				}
				if(house_info == 2) {
					this.$router.push({
						path: '/shortDetails',
						query: {
							houseId: houseId
						}
					})
				}
			},
			loadList() {
				this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
				this.page++;
				this.GetCartHistoryApi();
			},
			GetCartHistoryApi() {

				let ajaxSign = {
					token: this.mySessionUserinfo.token, // string 是 验证登录
					userId: this.mySessionUserinfo.id.toString(), // string 是 当前用户id 50
					toUser: this.user_id.toString(), // string 是 对应聊天人id 49
					page: this.page.toString(), // string 否 请求下一页时携带， 不带默认为第一页 page = 1 1
					houseId: this.houseId.toString(), // string 否 新版必传
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetCartHistory(ajaxData)
					.then(res => {
						let resultreverse = res.result.reverse();
						for(var i = 0; i < resultreverse.length; i++) {
							if(resultreverse[i].house_info != "") {
								resultreverse[i].house_info = JSON.parse(resultreverse[i].house_info);
							}
							var date1 = new Date(resultreverse[i].ctime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
							var Y = date1.getFullYear();
							var M = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1);
							var D = date1.getDate();
							var HT = date1.getHours();
							var MT = date1.getMinutes();
							resultreverse[i].ctime = M + "-" + D + " " + HT + ":" + MT;
						}
						this.CartHistorydata = resultreverse.concat(this.CartHistorydata);
					})
			},
			sendfun() {
				if(this.num == true) {
					let cagentData = {
						house_id: this.houseId,
						msg: this.msgsend,
						from_user: this.mySessionUserinfo.id,
						to_user: this.user_id,
						pic: this.baseInfodata.imgUrl,
						nick: this.baseInfodata.nick,
						house_type: this.houseType,
						house_info: this.house_info
					}
					let cagentData2 = {
						house_id: this.houseId,
						msg: this.msgsend,
						from_user: this.mySessionUserinfo.id,
						to_user: this.user_id,
						pic: this.baseInfodata.imgUrl,
						nick: this.baseInfodata.nick,
						house_type: this.houseType,
						//						house_info: this.house_info
					}
					this.threadPoxi(cagentData)
					this.threadPoxi(cagentData2)
					this.GetCartHistoryApi();
					this.num = false;
				} else {
					let cagentData = {
						house_id: this.houseId,
						msg: this.msgsend,
						from_user: this.mySessionUserinfo.id,
						to_user: this.user_id,
						pic: this.baseInfodata.imgUrl,
						nick: this.baseInfodata.nick,
						house_type: this.houseType,
					}
					this.threadPoxi(cagentData)
				}

			},
			threadPoxi(cagentData) { // 实际调用的方法
				//参数
				const agentData = JSON.stringify(cagentData)
				//若是ws开启状态
				if(this.websock.readyState === this.websock.OPEN) {
					this.websocketsend(agentData)
				}
				// 若是 正在开启状态，则等待300毫秒
				else if(this.websock.readyState === this.websock.CONNECTING) {
					let that = this; //保存当前对象this
					setTimeout(function() {
						that.websocketsend(agentData)
					}, 300);
				}
				// 若未开启 ，则等待500毫秒
				else {
					this.initWebSocket();
					let that = this; //保存当前对象this
					setTimeout(function() {
						that.websocketsend(agentData)
					}, 500);
				}
			},
			initWebSocket() { //初始化weosocket
				//ws地址
				const wsuri = "ws://54.222.251.229:9501?token=" + this.mySessionUserinfo.token;
				this.websock = new WebSocket(wsuri);
				this.websock.onmessage = this.websocketonmessage;
				this.websock.onclose = this.websocketclose;
			},
			websocketonmessage(e) { //数据接收
				const redata = JSON.parse(e.data);
			},
			websocketsend(agentData) { //数据发送
				this.websock.send(agentData);
				this.page = 1;
				this.CartHistorydata = [];
				this.GetCartHistoryApi();
				this.msgsend = "";
			},
			websocketclose(e) { //关闭
				console.log("connection closed (" + e.code + ")");
			}
		}
	}
</script>

<style>
	.ZhuddNewsInfo {
		background: #F5F5F5;
	}
	/*carttitle*/
	
	.ZhuddNewsInfo-title {
		font-size: .35rem;
		color: #282828;
		text-align: center;
		line-height: .9rem;
		background: #fff;
		border-top: .001rem solid #EEECEC;
	}
	
	.ZhuddNewsInfo-conright {
		flex-direction: row-reverse
	}
	
	.ZhuddNewsInfo-item {
		display: flex;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.zcl-textbox {
		margin-left: .2rem;
		padding-top: .1rem;
		box-sizing: border-box;
	}
	
	.zcl-iconbox {
		width: .97rem;
		height: .97rem;
	}
	
	.zcl-icon {
		max-width: 100%;
		min-height: 100%;
		border-radius: 50%;
	}
	
	.zcl-gary {
		font-size: .25rem;
		color: #a4a4a4;
	}
	
	.zcl-garyright {
		text-align: right;
	}
	
	.zcl-content {
		font-size: .24rem;
		color: #fff;
		/*line-height: .42rem;*/
		background: #E25051;
		padding: .2rem;
		box-sizing: border-box;
		max-width: 4.83rem;
		border-radius: 0 .15rem .15rem .15rem;
		margin-top: .1rem;
		word-break: break-all;
		/*//只对英文起作用，以字母作为换行依据*/
		word-wrap: break-word;
		/*//只对英文起作用，以单词作为换行依据*/
		white-space: pre-wrap;
		/*//只对中文起作用，强制换行*/
	}
	
	.zcl-content-right {
		background: #fff;
		color: #282828;
		border-radius: .15rem 0 .15rem .15rem;
	}
	
	.zcl-textboxright {
		margin-right: .2rem;
	}
	/*发送*/
	
	.ZhuddNewsInfo-sendbox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .24rem;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		background: #fff;
	}
	
	.cart-sendtext {
		width: 5.5rem;
		height: .56rem;
		/*max-height: 1rem;*/
		border: none;
		border: .01rem solid #A4A4A4;
		border-radius: .1rem;
		padding: .1rem;
		box-sizing: border-box;
	}
	
	.cart-icon {
		width: .5rem;
		height: .5rem;
		background: url(../assets/img/zhuddiconall.png) no-repeat center;
		background-size: 100%;
		margin: 0 .2rem;
	}
	
	.card-send {
		width: .9rem;
		height: .56rem;
		background: #E25051;
		color: #fff;
		text-align: center;
		line-height: .56rem;
		border-radius: .1rem;
	}
	
	.zclhouse_infoimg {
		width: 2rem;
		height: 1.2rem;
	}
	
	.zclhouse_infotext {
		margin-left: .15rem;
		padding: .1rem 0;
		box-sizing: border-box;
	}
	
	.zclhouse_infobox {
		display: flex;
	}
	
	::-webkit-scrollbar {
		display: none;
	}
	
	.yd-pullrefresh-dragtip {
		background: none;
	}
	
	.yd-pullrefresh-dragtip-icon>i {
		background: none;
		background-size: 14px;
	}
</style>